<div id="createBank<?php echo $uniqid;?>" style="padding-top: 20px">
    <el-form :model="params" method="post" size="small" label-width="140px" @submit.native.prevent label-position="right">
        <el-form-item :label="showInfo.real_name_title">
            <el-input v-model="params.real_name" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="银行名称：" v-if="type === 'bank'">
            <el-select v-model="params.bank_name" style="max-width: 140px;" size="mini" placeholder="请选择银行" popper-class="zindex_popper">
                <el-option
                        v-for="item in bank"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="支行地区：" v-if="type === 'bank'">
            <el-select v-model="selectProvId" style="max-width: 140px;" @change="((val)=>{areaChang(1,val)})" size="mini" placeholder="请选择省份" popper-class="zindex_popper">
                <el-option :value='0' :key='0' label="请选择省份"></el-option>
                <el-option
                        v-for="item in prov"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="selectCityId" style="max-width: 160px;" @change="((val)=>{areaChang(2,val)})" size="mini" placeholder="请选择城市" popper-class="zindex_popper" v-if="selectProvId>0">
                <el-option :value='0' :key='0' label="请选择城市"></el-option>
                <el-option
                        v-for="item in city"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id" v-if="item.pid == selectProvId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="支行名称：" v-if="type === 'bank'">
            <el-input v-model="params.branch_name" size="small" maxlength="11" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item :label="showInfo.card_no_title">
            <el-input v-model="params.card_no" placeholder="请输入卡号" size="small" style="width: 500px"></el-input>
        </el-form-item>
    </el-form>
    <div id="createBankdlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
</div>
<script>
    var createBankVm = new Vue({
        el: '#createBank<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            prov: JSON.parse('<?php echo addslashes($prov);?>'),
            city: JSON.parse('<?php echo addslashes($city);?>'),
            bank: JSON.parse('<?php echo addslashes($bank);?>'),
            index:'<?php echo addslashes($index);?>',
            type:'<?php echo addslashes($type);?>',
            selectProvId:0,
            selectCityId:0,
            showInfo:{
                real_name_title:'帐户持有人姓名：',
                card_no_title:'银行卡号：',
            },
            wechatInfo:{
                real_name_title:'微信实名姓名：',
                card_no_title:'微信号：',
            },
            alipayInfo:{
                real_name_title:'支付宝姓名：',
                card_no_title:'支付宝帐号：',
            }
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){
                let that = this;
                if (this.type === 'wechat'){
                    this.showInfo = this.wechatInfo;
                } else if (this.type === 'alipay') {
                    this.showInfo = this.alipayInfo;
                } else {
                    that.prov.forEach((item, index) => {
                        if(item.name === that.params.province){
                            that.selectProvId = item.id;
                        }
                    })
                    that.city.forEach((item, index) => {
                        if(item.name === that.params.city){
                            that.selectCityId = item.id;
                        }
                    })
                }
            },
            areaChang:function (type, value) {
                if(type === 1){
                    this.selectCityId = 0;
                }
            },
            submit: function(){
                let that = this;
                that.params.type = that.type;
                if( that.params.real_name.length < 2){
                    $.messager.alert('提示', `${that.showInfo.real_name_title}未填写`,'warning');
                    return;
                }
                if( that.params.card_no.length < 2){
                    $.messager.alert('提示', `${that.showInfo.card_no_title}未填写`,'warning');
                    return;
                }
                if( that.type === 'bank' ){
                    if( that.params.bank_name.length < 2 ){
                        $.messager.alert('提示', '提现银行未选择','warning');
                        return;
                    }
                    if( that.selectProvId === 0 || that.selectCityId === 0 ){
                        $.messager.alert('提示', '支行地区未选择','warning');
                        return;
                    }else{
                        $.each(that.prov, function (index, item) {
                            if(item.id === that.selectProvId){
                                that.params.province = item.name;
                            }
                        })
                        $.each(that.city, function (index, item) {
                            if(item.id === that.selectCityId){
                                that.params.city = item.name;
                            }
                        })
                    }
                    if( that.params.branch_name.length < 2 ){
                        $.messager.alert('提示', '请填写支行名称','warning');
                        return;
                    }
                }
                let action = (that.params.id)?'edit':'create';
                $.post(`/merchant/bank/${action}`, that.params, function(res){
                    if(res.ret===0){
                        $.messager.show({
                            title:'提示',
                            msg:res.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#bankCreateDlg").dialog('close');
                        myBankListVm.params[that.index].id = res.data.id;
                        myBankListVm.params[that.index].real_name = that.params.real_name;
                        myBankListVm.params[that.index].card_no = that.params.bank_name + that.params.card_no;
                        myBankListVm.params[that.index].updated_at = res.data.updated_at;
                    }else{
                        $.messager.alert('提示',res.msg,'warning');
                    }
                });
            }
        }
    });
    $('#bankCreateSubmit').click(function(data){
        createBankVm.submit();
    })
</script>
<style>
    .zindex_popper{
        z-index: 20000 !important;
    }
</style>